<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta 
        name="viewport" 
        content="width=device-width,viewport-fit=cover initial-scale=1.0"
    >
    <title>Document</title>
    <!-- 重置默认样式 -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="fonts/iconfont.css">
    <!-- 全局样式 -->
    <link rel="stylesheet" href="css/global.css">
    <!-- 首页样式文件 -->
     <link rel="stylesheet" href="css/index.css">
    <!-- Swiper轮播图 -->
     <link rel="stylesheet" href="css/swiper-bundle.min.css">
</head>
<body>
    <!-- header start -->
    <header class="header">
        <a href="#" class="position">
            <span class="iconfont icon-weizhi"></span>
        </a>
        <div class="search">
           <form action="">
                <input type="text" placeholder="小芒果" class="input-search">
                <span class="iconfont icon-fangdajing"></span>
           </form>
        </div>
        <div class="chat">
            <span class="iconfont icon-xiazai16"></span>
        </div>
    </header>
    <!-- end header -->
    <main>
        <div class="container">
            <!-- menu start -->
            <nav class="menu">
                <ul>
                    <li>
                        <a href="#">
                            <div class="bl1-1 bg1">
                                <span class="iconfont icon-shucai"></span>
                            </div>
                            <p class="title">水果蔬菜</p>
                        </a>
                    </li>
                    <li>
                       <a href="#">
                            <div class="bl1-1 bg2">
                                <span class="iconfont icon-qinlei"></span>
                            </div>
                            <p class="title">肉禽蛋品</p>
                       </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="bl1-1 bg3">
                                <span class="iconfont icon-yu"></span>
                            </div>
                            <p class="title">海鲜水产</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="bl1-1 bg4">
                                <span class="iconfont icon-lengdongshipin"></span>
                            </div>
                            <p class="title">速食冷冻</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="bl1-1 bg5">
                                <span class="iconfont icon-mimian"></span>
                            </div>
                            <p class="title">粮油食品</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="bl1-1 bg6">
                                <span class="iconfont icon-dazhe"></span>
                            </div>
                            <p class="title">夏日特惠</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="bl1-1 bg7">
                                <span class="iconfont icon-xuegao"></span>
                            </div>
                            <p class="title">雪糕冰棍</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="bl1-1 bg8">
                                <span class="iconfont icon-lingshi"></span>
                            </div>
                            <p class="title">休闲零食</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="bl1-1 bg9">
                                <span class="iconfont icon-yinliao"></span>
                            </div>
                            <p class="title">酒水饮品</p>
                        </a>
                    </li>
                    <li>
                       <a href="#">
                            <div class="bl1-1 bg10">
                                <span class="iconfont icon-yijia"></span>
                            </div>
                            <p class="title">日用百货</p>
                       </a>
                    </li>
                </ul>    
            </nav>
            <!-- end menu -->
             <!-- cheap start -->
            <section class="cheap container">
                <div class="cheap-title">
                    <span class="text">超划算</span>
                    <a href="#" class="more">更多</a>
                </div>
                <div class="cheap-content">
                    <ul>
                        <li>
                            <div class="item-content">
                                <div class="bl94-81">
                                    <a href="#"><img src="./images/pro1.png" alt=""></a>
                                </div>   
                                <a href="#" class="txt"><p class="title ellipsis-single-line">富士小苹果 1.5</p>  </a>
                                <div class="info">
                                    <span class="price">¥ 20.9<i>/箱</i></span>
                                    <a href="#" class="cart"><span class="iconfont icon-gouwuche"></span></a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="bl94-81">
                                    <a href="#"><img src="images/pro2.png" alt=""></a>
                                </div>   
                                <a href="#" class="txt"><p class="title ellipsis-single-line">麻辣小龙虾 1.5</p></a>
                                 <div class="info">
                                    <span class="price">¥ 20.9<i>/箱</i></span>
                                    <a href="#" class="cart"><span class="iconfont icon-gouwuche"></span></a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="bl94-81">
                                    <a href="#"><img src="images/pro3.png" alt=""></a>
                                </div>
                                <a href="#" class="txt"><p class="title ellipsis-single-line">香甜美人蕉 1.5</p></a>
                                <div class="info">
                                    <span class="price">¥ 20.9<i>/箱</i></span>
                                    <a href="#" class="cart"><span class="iconfont icon-gouwuche"></span></a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </section>
             <!-- end cheap -->
            <!-- recommend-product start -->
            <section class="recommend-product">
                <div class="product-item">
                    <p class="title">吃好点</p>
                    <p class="desc ellipsis-single-line">新鲜大樱桃尝鲜</p>
                    <ul>
                        <li>
                            <div class="bl1-1">
                                <a href="#"><img src="images/img1.png" alt=""></a>
                            </div>
                        </li>
                        <li>
                            <div class="bl1-1">
                               <a href="#"> <img src="images/img2.png" alt=""></a>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="product-item">
                    <p class="title">产地量贩</p>
                    <p class="desc ellipsis-single-line">产地直发保质保鲜</p>
                    <ul>
                        <li>
                            <div class="bl1-1">
                               <a href="#"> <img src="images/img3.png" alt=""></a>
                            </div>
                        </li>
                        <li>
                            <div class="bl1-1">
                                <a href="#"><img src="images/img4.png" alt=""></a>
                            </div>
                        </li>
                    </ul>
                </div>
            </section>
            <!-- end recommend-product -->
             <!-- product-category start -->
            <div class="product-category container">
                <!-- tab-header start -->
                 <div class="swiper tab-header">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <p>全部</p>
                            <span>猜你喜欢</span>
                        </div>
                        <div class="swiper-slide">
                            <p>时令</p>
                            <span>当季优选</span>
                        </div>
                        <div class="swiper-slide">
                            <p>进口</p>
                            <span>国际直采</span>
                        </div>
                        <div class="swiper-slide">
                            <p>人气</p>
                            <span>大家在买</span>
                        </div>
                    </div>
                </div>
                <!-- end tab-header -->
                 <!-- tab-content start -->
                 <div class="swiper tab-content">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="tab-content-item">
                                            <div class="img">
                                                <div class="bl94-81">
                                                    <img src="images/product2.png" alt="">
                                                </div>
                                            </div>
                                            <div class="info">
                                               <p class="title">红颜草莓 1.5kg</p> 
                                               <div class="marks">
                                                    <span class="mark active">特价</span>
                                                    <span class="mark">24H发货</span>
                                               </div>
                                               <div class="price-cart">
                                                    <span class="price">¥ 20.9<i>/箱</i></span>
                                                    <span class="cart iconfont icon-gouwuche"></span>
                                               </div>
                                               <p class="count">888 人已买过</p>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="tab-content-item">
                                            <div class="img">
                                                <div class="bl94-81">
                                                    <img src="images/product1.png" alt="">
                                                </div>
                                            </div>
                                            <div class="info">
                                               <p class="title">沙漠西瓜 1.5kg</p> 
                                               <div class="marks">
                                                    <span class="mark active">特价</span>
                                                    <span class="mark">24H发货</span>
                                               </div>
                                               <div class="price-cart">
                                                    <span class="price">¥ 20.9<i>/箱</i></span>
                                                    <span class="cart iconfont icon-gouwuche"></span>
                                               </div>
                                               <p class="count">888 人已买过</p>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                 <li>
                                    <a href="#">
                                        <div class="tab-content-item">
                                            <div class="img">
                                                <div class="bl94-81">
                                                    <img src="images/product2.png" alt="">
                                                </div>
                                            </div>
                                            <div class="info">
                                               <p class="title">红颜草莓 1.5kg</p> 
                                               <div class="marks">
                                                    <span class="mark active">特价</span>
                                                    <span class="mark">24H发货</span>
                                               </div>
                                               <div class="price-cart">
                                                    <span class="price">¥ 20.9<i>/箱</i></span>
                                                    <span class="cart iconfont icon-gouwuche"></span>
                                               </div>
                                               <p class="count">888 人已买过</p>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="tab-content-item">
                                            <div class="img">
                                                <div class="bl94-81">
                                                    <img src="images/product1.png" alt="">
                                                </div>
                                            </div>
                                            <div class="info">
                                               <p class="title">沙漠西瓜 1.5kg</p> 
                                               <div class="marks">
                                                    <span class="mark active">特价</span>
                                                    <span class="mark">24H发货</span>
                                               </div>
                                               <div class="price-cart">
                                                    <span class="price">¥ 20.9<i>/箱</i></span>
                                                    <span class="cart iconfont icon-gouwuche"></span>
                                               </div>
                                               <p class="count">888 人已买过</p>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="swiper-slide"></div>
                        <div class="swiper-slide"></div>
                        <div class="swiper-slide"></div>
                    </div>
                </div> 
                  <!-- end tab-content  -->
            </div>
            <!-- end product-category -->
        </div>
    </main>
    <!-- tabbar start -->
    <section class="tabbar">
        <ul>
            <li class="tabbar-item active">
                <a href="#">
                    <span class="iconfont icon-zhuye"></span>
                    <p class="txt">主页</p>
                </a>
            </li>
            <li class="tabbar-item">
                <a href="#">
                    <span class="iconfont icon-fenlei"></span>
                    <p class="txt">分类</p>
                </a>
            </li>
            <li class="tabbar-item">
                <a href="#">
                    <span class="iconfont icon-gouwuche"></span>
                    <p class="txt">购物车</p>
                </a>
            </li>
            <li class="tabbar-item">
                <a href="#">
                    <span class="iconfont icon-gerenzhongxin2"></span>
                    <p class="txt">我的</p>
                </a>
            </li>
        </ul>
    </section>
    <!-- end tabbar -->
    <script src="js/swiper-bundle.min.js"></script>
    <script>
        const carts = document.querySelectorAll(".product-category .cart")
        for(let i = 0; i < carts.length; i++){
            carts[i].addEventListener('click', function(e){
                // 阻止默认行为
                e.preventDefault()
                // alert("加购")
            })
        }
    </script>
    <script>  
    // tab-header
    var thumbsSwiper = new Swiper('.tab-header',{
        watchSlidesVisibility: true,//防止不可点击
        slidesPerView : 'auto',    // 根据slide的宽度自动调整展示数量。此时需要设置slide的宽度
    })
    // tab-content
    var gallerySwiper = new Swiper('.tab-content',{
        spaceBetween: 10,
        thumbs: {
            swiper: thumbsSwiper,
        }
    })      
  </script>
</body>
</html>